<template>
  <view class="text-hidden">
    <view
      :class="['content-box' + instance?.uid]"
      v-bind="$attrs"
      :style="{
        fontSize: size + 'rpx',
        color: textColor,
      }"
      @click="console.log(text)"
    >
      <view v-if="!isShowMore">
        <text>{{ text }}</text>
      </view>
      <fui-overflow-hidden
        v-else
        :rows="2"
        :text="text"
        size="26"
        :color="textColor"
      ></fui-overflow-hidden>
      <view></view>

      <!--    {{ $slots.default()[0].children }}-->
    </view>
    <view style="text-align: right">
      <text
        :style="{ color: seeMoreColor }"
        class="more"
        @click="isShowMore = !isShowMore"
        v-if="contentHeight > th"
      >
        {{ isShowMore ? t("my.seeMore") : t("my.PutAway") }}
      </text>
    </view>
  </view>
</template>
<script setup lang="ts">
import { computed, nextTick, onMounted, ref } from "vue";
import FuiOverflowHidden from "@/components/firstui/fui-overflow-hidden/fui-overflow-hidden.vue";
import { useI18n } from "vue-i18n";

const instance = getCurrentInstance();
const { t } = useI18n();
const props = defineProps({
  text: {
    type: String,
    default: "",
  },
  rows: {
    type: Number,
    default: 2,
  },
  textColor: {
    type: String,
    default: "$vice-subject-color",
  },
  seeMoreColor: {
    type: String,
    default: "$vice-subject-color",
  },
  size: {
    type: Number,
    default: 26,
  },
  th: {
    type: Number,
    default: 50,
  },
});
const contentHeight = ref(0);
const isShowMore = ref(false);

onMounted(() => {
  nextTick(() => {
    uni
      .createSelectorQuery()
      .select(".content-box" + instance?.uid)
      .boundingClientRect((data) => {
        contentHeight.value = data.height;
        // 判断内容是否超出盒子
        isShowMore.value = contentHeight.value > props.th;
      })
      .exec();
  });
});
</script>
<style lang="scss" scoped>
.content-box {
  font-size: 26rpx;
  line-height: 1.5;
  color: $vice-subject-color;
}

.more {
  // margin-left: auto;
  font-size: 14px;
  // 文本下划线
  text-decoration: underline;
  color: $vice-subject-color;
}
</style>
